<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2013 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="origin-trial" content="AnnZaSfBggcmPxgNMYPXgW7tVBy3HoIkgSysHge4o7QT7U/n3Sr89HvKuJwNtPxgZ9Z/cs6TzbUy6F+glrMQngIAAABZeyJvcmlnaW4iOiJodHRwczovL2dvbmF0aXZlY2xpZW50LmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJQTmFDbCIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">

    <title>Bullet Physics</title>

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
    <link href="/static/css/out/site.css" rel="stylesheet">


    <script type="text/javascript" src="NaClAM.js"></script>
    <script type="text/javascript" src="NaClAMBullet.js"></script>
    <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script>
    <script type="text/javascript" src="scene.js"></script>
    <script type="text/javascript" src="world.js"></script>
    <script type="text/javascript" src="scenes.js"></script>

  </head>

  <body class="demo">

    <header>
      <h1>Bullet Physics</h1>

    </header>

    <section>
      <div class="intro">
        <p>
          An example of the <a href="http://bulletphysics.org/"
            target="_blank">Bullet Physics SDK</a> ported to Native Client,
          using WebGL for rendering.
        </p>
        <p class="note">
          Example courtesy  <a href="http://www.johnmccutchan.com"
            target="_blank">John McCutchan</a>. Read his <a
            href="http://www.johnmccutchan.com/2012/10/bullet-native-client-acceleration-module.html"
            target="_blank">description</a> of the demo or browse the <a
            href="https://github.com/johnmccutchan/NaClAMBase"
            target="_blank">source</a>.
          <br>
        </p>
        <p class="note">
          Simulation Time: <span id="simulationTime">0</span>&mu;s
          <br>
          FPS: <span id="fps">0</span>
        </p>

        <div class="panel panel-info">

          <h2>Controls</h2>

          <div class="panel-body">
            <ul>
              <li><b>Click and drag</b> an object to move it</li>
              <li><b>Click and drag</b> elsewhere to rotate the camera</li>
              <li>Use the <b>mousewheel</b> to zoom in/out</li>
            </ul>
          </div>

          <h2>Add Objects</h2>

          <div class="panel-body">
            <button type="button" id="jenga10">Block Tower (10 blocks)</button>
            <button type="button" id="jenga20">Block Tower (20 blocks)</button>
            <button type="button" id="randomCube250">Random Cubes (250)</button>
            <button type="button" id="randomCube1000">Random Cubes (1000)</button>
            <button type="button" id="randomCube2000">Random Cubes (2000)</button>
            <button type="button" id="randomCylinder500">Random Cylinders (500)</button>
            <button type="button" id="randomShapes">Random Shapes</button>
            <button type="button" id="reload">Reload Scene</button>
          </div>
        </div>
      </div>

      <div class="Demo-body">

      <div id="listener" class="Demo-content">
        <div id="rendererContainer"></div>
      </div>
    </div>

    <div id="loading-cover">
      <div id="message">
        <div id="statusField"></div>
        <div id="progress" class="progress progress-striped active">
          <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
          </div>
        </div>
      </div>
    </div>
  </section>

  <script type="text/javascript" src="main.js"></script>
</body>
</html>
